﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试页面</title>
    <link href="../Css/Main.css" rel="stylesheet" />
    <link rel="shortcut icon" type="image/ico" href="../favicon.ico" />

    <style type="text/css">
        .code {
            font-style: italic;
            color: Red;
            border: 0;
            padding: 2px 3px;
            letter-spacing: 3px;
            font-weight: bolder;
        }

        .unchanged {
            border: 0;
        }
    </style>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.load.min.js"></script>
</head>
<body>
    <style>
        #TextArea1 {
            height: 121px;
            width: 477px;
        }

        .auto-style1 {
            width: 10px;
        }
    </style>
    <div id="loading">
        <div style="display: block; position: fixed; z-index: 2024; width: auto; top: 50%; left: 50%; margin: 0px 0 0 -100px; text-align: center; vertical-align: middle;">
            <img src="../Images/loading.gif" width="145px" height="28px" />
        </div>
        <div style="width: 100%; height: 100%; position: fixed; z-index: 2023; top: 0px; left: 0px; overflow: hidden; background-color: #FFFFFF;">
        </div>
    </div>
    <textarea id="TextArea1" name="TextArea1"></textarea>
        <div class="reg">
            <h2 lang="zh-x-mtfrom-en">创建您的CloudFlare帐户</h2>
            <div class="form">
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="Email">你的电子邮件地址</label>
                    </div>
                    <div class="cell input">
                        <input type="text" error="请输入有效的电子邮件地址" id="Email"><div class="rating">
                            <div class="mask"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="EmailConfirm">确认电子邮件地址</label>
                    </div>
                    <div class="cell input">
                        <input type="text" error="这必须是相同的，上面输入的电子邮件" id="EmailConfirm">
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="Username">请输入您的用户名</label>
                    </div>
                    <div class="cell input">
                        <input type="text" error="您必须输入一个用户名至少4个字符长" placeholder="这将是您在本站点唯一标识" id="Username">
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="Password">密码</label>
                    </div>
                    <div class="cell input">
                        <input type="password" error="您必须输入一个强密码" placeholder="至少 6 个字符！" id="Password">
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="PasswordConfirm">确认密码</label>
                    </div>
                    <div class="cell input">
                        <input type="password" error="这必须匹配输入上面的密码" id="PasswordConfirm">
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="KeyCode">请输入验证码</label>
                    </div>
                    <div class="cell input" style="width: 447px; top: 0px; left: 0px;">
                        <input type="text" placeholder="请输入图示中的字符" error="请输入4位验证码" id="KeyCode" style="width: 300px;">
                        <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px; float: right;" />
                    </div>
                </div>
                <div class="row">
                    <div class="cell label">
                        <label lang="zh-x-mtfrom-en" for="Agree">注册条款</label>
                    </div>
                    <div class="cell input">
                        <input type="checkbox" error="您必须同意Q&A注册条款" id="Agree"><label lang="zh-x-mtfrom-en" for="Agree"> 查看<a target="_blank" href="#">Q&A注册条款</a> 。</label>
                    </div>
                </div>
            </div>
            <input type="submit" value="立即注册" id="SubUserReg" class="FirstBigBtn">
            <input type="button" value="已有账号，登录" id="login" class="SecondBigBtn">

            <input type="text" id="input1" />
            <br />
            <input id="Button1" onclick="validate();" type="button" value="确定" />
        </div>
    <script type="text/javascript">
        var code; //在全局 定义验证码
        function createCode() {
            code = "";
            var codeLength = 4;//验证码的长度
            var checkCode = document.getElementById("checkCode");
            var selectChar = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9');// 所有候选组成验证码的字符，当然也可以用中文的    
            for (var i = 0; i < codeLength; i++) {
                var charIndex = Math.floor(Math.random() * 10);
                code += selectChar[charIndex];
            }
            //alert(code);
            if (checkCode) {
                checkCode.className = "code";
                checkCode.value = code;
            }
        }
        function validate() {
            var inputCode = $("#input1").value;
            if (inputCode.length <= 0) {
                alert("！");
            }
            else if (inputCode != code) {
                alert("验证码输入错误！");
                createCode();//刷新验证码
            }
            else {
                alert("^-^ OK");
            }
        }
        createCode();
        head.js("http://code.jquery.com/jquery-1.8.0.min.js", "../Scripts/PoshyTip/jquery.poshytip.js", "../Scripts/artDialog/jquery.artDialog.js", "../Editor/kindeditor-min.js", "../Editor/lang/zh_CN.js", "../Scripts/validation.js", function () {
            $(function () {

                $('#login').click(function () { $.dialog("sdf"); });
                var editor;
                editor = new KindEditor.create('textarea[name="TextArea1"]', {
                    themeType: 'simple',
                    cssPath: ['../Editor/plugins/code/prettify.css'],
                    items: [
                        'source', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'removeformat', 'link', 'unlink', 'emoticons', 'code', '', 'preview'
                    ]
                });
                $('#loading').fadeOut("slow");
            });

        });

    </script>
</body>
</html>
